<template>
	<view class="section-comment">
		<view class="top" style="z-index: 4;">
			<uni-icons style="margin-left: 30rpx;" type="left" size="25" color="#2c2c2c" @click="toBackPage">
			</uni-icons>

			<view>{{sectionContentInfo.name ? sectionContentInfo.name : "本节介绍"}}</view>

			<view style="display: flex;flex-direction: row;align-items: center;" @click="changeCommentInputStatus()">
				<uni-icons style="margin-right: 40rpx;" type="plus" size="30" color="#2c2c2c"></uni-icons>
			</view>
		</view>

		<view v-if="sectionContentInfo.type == 0" class="text-content">
			<view v-html="sectionContentInfo.content"></view>
		</view>

		<view v-if="sectionContentInfo.type == 2" class="problem-content">
			<view class="popup-content">
				<view class="title">{{sectionContentInfo.problem.description}}</view>
				<view class="option" v-for="(option,index) in sectionContentInfo.problem.options" :key="option.id"
					@click="handleSelectedOption(index)">
					<view class="option-char"
						:class="[
							{'selected-option-char':selectedOption === index},
							{'selected-wrong-option':isWrong(selectedOption,sectionContentInfo.problem.answer) && selectedOption === index}]"
						style="display: inline-block;">
						{{choosesLeft[index]}}
					</view>
					<view class="option-name" style="display: inline-block;">
						{{option}}
					</view>
				</view>
			</view>
		</view>

		<view v-if="sectionContentInfo.type == 1" class="video-content">
			<video id="myVideo" :src="sectionContentInfo.video.playUrl" @error="videoErrorCallback" @play="onStartPlay"
				@pause="onPause" @timeupdate="videoTimeUpdateEvent" autoplay="true" @fullscreenchange="fullScreenChange"
				poster="https://www.cdn.kxcdedu.top/01378270801f71ed809e6723b78e0102/snapshots/89ff6147c21f4d859fb82cfa003a8bf6-00005.jpg"
				:initial-time="lastTime" enable-danmu controls page-gesture
				style="width: 750rpx;height: 422rpx;z-index: 1;">
			</video>
		</view>


		<view v-if="sectionContentInfo.type == 1 && !isFocus && !commentInputStatus" class="main-info"
			style="margin-top: 460rpx;">
			<view
				style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 20rpx;margin-left: 20rpx;width: 710rpx;">
				<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
					<view>已看完：3节</view>
					<uni-icons v-if="showHistorySection" style="margin-left: 20rpx;" type="eye" size="28"
						color="#9d9d9d" @click="changeHistoryShow"></uni-icons>
					<uni-icons v-else style="margin-left: 20rpx;" type="eye-slash" size="28" color="#9d9d9d"
						@click="changeHistoryShow"></uni-icons>
				</view>
				<uni-icons @click="changeFocus" type="circle-filled" size="30" color="#9f9f9f"></uni-icons>
			</view>

			<view v-for="(pice,index) in videoPices">

				<view class="video-pice" v-if="showHistorySection || pice.progress < 100">
					<view class="pice-top">
						<view class="progress">
							<view :style="{'width': pice.progress + '%'}" class="progress-inner"></view>
							<view style="position: absolute;left: 20rpx;top: 15rpx;z-index: 3;"
								@click="gotoVideoTime(pice.startTime)">{{pice.title}}</view>
						</view>

						<view
							style="display: flex;flex-direction: row;position: absolute;right: 20rpx;top: 15rpx;z-index: 3;"
							@click="changeCommentShow(index)">
							<view style="font-size: 28rpx;color: #9f9f9f ;">{{pice.comments.length}}条</view>
							<uni-icons v-if="pice.showComment" type="bottom" size="20" color="#9f9f9f"></uni-icons>
							<uni-icons v-else type="top" size="20" color="#9f9f9f"></uni-icons>
						</view>
					</view>


					<view class="comments" v-if="pice.showComment">
						<view class="comment" v-for="(comment,commentIndex) in pice.comments">
							<view class="comment-top">
								<view style="display: flex;flex-direction: row;align-items: center;">
									<view class="avatar">
										<image mode="aspectFill" :src="comment.userInfo.avatar"></image>
									</view>
									<view class="nickname">{{comment.userInfo.nickname}}</view>
								</view>
								<uni-icons @click="toHandleComment(comment.id)" type="more-filled" size="20"
									color="#c8c8c8">
								</uni-icons>
							</view>

							<view>{{comment.content}}</view>



							<view class="pictures">
								<view v-for="picture in comment.pictures" class="picture">
									<image mode="aspectFill" :src="picture"
										@tap="ViewImage(picture,commentIndex,index)" />
								</view>
							</view>

							<view v-if="comment.reply && comment.reply != ''" v-html="comment.reply"
								style="padding: 20rpx;background-color: #e7e7e7;margin: 20rpx 0;border-radius: 10rpx;overflow: hidden;">
							</view>

							<view class="comment-bottom">

								<view class="date">{{comment.gmtCreate | gmtToDate}}</view>

								<view class="buttons">

									<view class="footer-item" v-if="comment.isMe">
										<view class="footer-button"
											@click="deleteComment(comment.id,commentIndex,index)">
											<uni-icons type="trash" size="25" color="#9d9d9d"></uni-icons>
										</view>
									</view>

									<view class="footer-item">
										<view class="footer-button"
											@click="addCommentWind(comment.id,commentIndex,index)">
											<uni-icons type="hand-up" size="25" color="#9d9d9d"></uni-icons>
										</view>
										<view class="text">{{comment.wind}}</view>
									</view>
									<!--<uni-icons v-if="comment.reply === ''" style="margin-right: 30rpx;" type="chatboxes"
									size="28" color="#9d9d9d"></uni-icons> -->

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="sectionContentInfo.type == 1 && isFocus && !commentInputStatus" class="main-info"
			style="margin-top: 460rpx;">
			<view
				style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 20rpx;margin-left: 20rpx;width: 710rpx;">
				<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
					<view>当前时段问答</view>
				</view>
				<uni-icons @click="changeFocus" type="circle-filled" size="30" color="#5a5a5a"></uni-icons>
			</view>

			<view v-for="(pice,index) in videoPices">
				<view class="video-pice">
					<view
						v-if="pice.startTime-50 <= currentVideoTime && pice.startTime+pice.duration+50 >= currentVideoTime"
						style="width: 100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
						<view class="progress">
							<view :style="{'width': pice.progress + '%'}" class="progress-inner"></view>
							<view style="position: absolute;left: 20rpx;top: 8rpx;z-index: 3;"
								@click="gotoVideoTime(pice.startTime)">{{pice.title}}</view>
						</view>
					</view>

					<view class="comments" v-if="pice.showComment">
						<view v-for="(comment,commentIndex) in pice.comments">
							<view class="comment"
								v-if="comment.time-50 <= currentVideoTime && comment.time+50 >= currentVideoTime">
								<view class="comment-top">
									<view style="display: flex;flex-direction: row;align-items: center;">
										<view class="avatar">
											<image mode="aspectFill" :src="comment.userInfo.avatar"></image>
										</view>
										<view class="nickname">{{comment.userInfo.nickname}}</view>
									</view>
									<uni-icons @click="toHandleComment(comment.id)" type="more-filled" size="20"
										color="#c8c8c8">
									</uni-icons>
								</view>

								<view>{{comment.content}}</view>


								<view class="pictures">
									<view v-for="picture in comment.pictures" class="picture">
										<image mode="aspectFill" :src="picture"
											@tap="ViewImage(picture,commentIndex,index)"> />
									</view>
								</view>

								<view v-if="comment.reply && comment.reply != ''" v-html="comment.reply"
									style="padding: 20rpx;background-color: #e7e7e7;margin: 20rpx 0;border-radius: 10rpx;overflow: hidden;">
								</view>

								<view class="comment-bottom">

									<view class="date">于2021.10.12 8:00</view>

									<view class="buttons">

										<view class="footer-item" v-if="comment.isMe">
											<view class="footer-button"
												@click="deleteComment(comment.id,commentIndex,index)">
												<uni-icons type="trash" size="25" color="#9d9d9d"></uni-icons>
											</view>
										</view>

										<view class="footer-item">
											<view class="footer-button"
												@click="addCommentWind(comment.id,commentIndex,index)">
												<uni-icons type="hand-up" size="25" color="#9d9d9d"></uni-icons>
											</view>
											<view class="text">{{comment.wind}}</view>
										</view>
										<!--<uni-icons v-if="comment.reply === ''" style="margin-right: 30rpx;" type="chatboxes"
										size="28" color="#9d9d9d"></uni-icons> -->

									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>

		<view class="main-info" v-if="sectionContentInfo.type != 1 && !commentInputStatus">

			<view class="split-line"></view>

			<view class="comments-top">
				<span style="font-weight: bold;font-size:36rpx;">全部评论</span>（{{comments.length}}条）
			</view>

			<view class="comments" v-if="comments.length > 0">
				<view v-for="(comment,commentIndex) in comments">
					<view class="comment">
						<view class="comment-top">
							<view style="display: flex;flex-direction: row;align-items: center;">
								<view class="avatar">
									<image mode="aspectFill" :src="comment.userInfo.avatar"></image>
								</view>
								<view class="nickname">{{comment.userInfo.nickname}}</view>
							</view>
							<uni-icons @click="toHandleComment(comment.id)" type="more-filled" size="20"
								color="#c8c8c8">
							</uni-icons>
						</view>

						<view>{{comment.content}}</view>


						<view class="pictures">
							<view v-for="picture in comment.pictures" class="picture"
								@tap="ViewImage(picture,commentIndex)">
								<image mode="aspectFill" :src="picture" />
							</view>
						</view>

						<view v-if="comment.reply && comment.reply != ''" v-html="comment.reply"
							style="padding: 10rpx;background-color: #ececec;margin: 20rpx 0;border-radius: 10rpx;">
						</view>

						<view class="comment-bottom">

							<view class="date">{{comment.gmtCreate | gmtToDate}}</view>

							<view class="buttons">

								<view class="footer-item" v-if="comment.isMe">
									<view class="footer-button" @click="deleteComment(comment.id,commentIndex)">
										<uni-icons type="trash" size="25" color="#9d9d9d"></uni-icons>
									</view>
								</view>

								<view class="footer-item">
									<view class="footer-button" @click="addCommentWind(comment.id,commentIndex)">
										<uni-icons type="hand-up" size="25" color="#9d9d9d"></uni-icons>
									</view>
									<view class="text">{{comment.wind}}</view>
								</view>
								<!--<uni-icons v-if="comment.reply === ''" style="margin-right: 30rpx;" type="chatboxes"
									size="28" color="#9d9d9d"></uni-icons> -->

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view v-if="!isFocus && commentInputStatus">
			<view class="main-info" :style="{'margin-top': sectionContentInfo.type == 1 ? '460rpx' : '40rpx'}">

				<view class="split-line"></view>

				<view class="comments-top">
					<span style="font-weight: bold;font-size:36rpx;">新建评论</span>
				</view>

				<view class="comment-add">
					<view class="textarea-box">
						<textarea :show-confirm-bar="false" class="textarea" style="width: 100%;"
							v-model="comment.content" placeholder="请输入..." maxlength="-1"
							placeholder-style="color:#c1c1c1"></textarea>
					</view>
					<view class="pictures">
						<view class="picture" :style="{'margin-right' : index == 2 ? '0' : '20rpx'}"
							v-for="(item,index) in comment.pictures" :key="index" @tap="ViewImage"
							:data-url="comment.pictures[index]">
							<image mode="aspectFill" style="width: 100%;height: 100%;" :src="comment.pictures[index]">
							</image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="picture-add" @tap="ChooseImage" v-if="comment.pictures.length<3">
							<uni-icons type="camera" size="30" color="#2c2c2c"></uni-icons>
						</view>
					</view>
					<view style="display: flex;flex-direction: column;">
						<view class="tag-area">
							<view class="tag" @click="changeType">
								<uni-icons v-if="comment.isQuestion" type="checkmarkempty" size="20" color="#2c2c2c">
								</uni-icons>
							</view>
							<view style="margin-left: 20rpx;">发表为提问</view>
						</view>

						<view class="tag-area">
							<view class="tag" @click="changeVisialbe">
								<uni-icons v-if="comment.visibility == 2" type="checkmarkempty" size="20"
									color="#2c2c2c">
								</uni-icons>
							</view>
							<view style="margin-left: 20rpx;">所有人可见</view>
						</view>
					</view>
				</view>
			</view>

			<view class="page-btns">
				<view class="button">
					<uni-icons @click="addComment" type="checkmarkempty" size="30" color="#2c2c2c"></uni-icons>
				</view>
			</view>

			<view class="page-btns" style="right: 160rpx;bottom:60rpx">
				<view class="button">
					<uni-icons @click="cancelAddComment" type="closeempty" size="30" color="#2c2c2c"></uni-icons>
				</view>
			</view>
		</view>

		<uni-popup ref="reportOptions" type="bottom">
			<view class="option-modal-box">
				<view class="option-buttons">
					<view class="option-button" @click="reportComment('内容涉嫌抄袭')">
						内容涉嫌抄袭
					</view>
					<view class="option-button" @click="reportComment('内容质量差')">
						内容质量差
					</view>
					<view class="option-button" @click="reportComment('广告植入')">
						广告植入
					</view>
					<view class="option-button" style="border-bottom: none;" @click="reportComment('其他违规原因')">
						其他违规原因
					</view>
				</view>
				<view class="cancel-button" @click="closeModal">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import UploadOss from '@/common/util/UploadOss'
	export default {
		data() {
			return {
				sectionContentInfo: {},
				selectedOption: null,

				lastTime: 0,


				videoContext: null,
				lastTime: 0, //新播放起点
				isGetLastTime: false, //获取到lastTime后再渲染<video>
				onTime: 0, //总播放时间
				nowTime: 0, //当前播放时间
				oldOnTime: 0, //保存拖拽前的观看时间
				currentVideoTime: 0, //最新进度
				durationTime: 0, // 总长度

				currentProgress: 0, // 文档阅读进度

				videoPices: [],

				isFocus: false,
				showHistorySection: true,
				comments: [],

				commentInputStatus: false,
				comment: {
					content: "",
					time: 0,
					pictures: [],
					visibility: 0,
					isQuestion: false
				},

				contentType: ["文本", "视频", "题目"],

				choosesLeft: ["A", "B", "C", "D", "E", "F"],
			}
		},
		onLoad(options) {
			var contentId = options.contentId
			this.getSectionContentInfo(contentId)
		},
		methods: {
			getSectionContentInfo(id) {
				this.$api.getSectionContentInfo({
					id
				}).then(res => {
					this.sectionContentInfo = res.data
					if (res.data.type == 1) {
						this.videoContext = uni.createVideoContext("myVideo", this);
						this.videoPices = res.data.pieces

						let index = 0
						for (; index < this.videoPices.length; index++) {
							this.videoPices[index].progress = 0
							this.videoPices[index].showComment = false
						}
					}
					if (res.data.type != 1) {
						this.comments = res.data.comments
					}

				})
			},
			addCommentWind(commentId, commentIndex, piceIndex) {
				this.$api.addSectionContentCommentWind({
					sectionContentCommentId: commentId
				}).then(() => {
					if (piceIndex != null) {
						this.videoPices[piceIndex].comments[commentIndex].wind++;
					} else {
						this.comments[commentIndex].wind++;
					}

				})
			},


			gotoVideoTime(videoTime) {
				this.videoContext.seek(videoTime);
			},

			changeFocus() {
				this.isFocus = !this.isFocus
			},

			changeCommentShow(index) {
				this.videoPices[index].showComment = !this.videoPices[index].showComment
				this.$forceUpdate()
			},

			// 播放进度改变
			videoTimeUpdateEvent(e) {
				let durationTime = Number(e.detail.duration);
				let newNowTime = parseInt(e.detail.currentTime);
				this.durationTime = durationTime
				this.currentVideoTime = newNowTime

				let index = 0
				for (; index < this.videoPices.length; index++) {
					if (this.videoPices[index].startTime >= newNowTime) {
						this.videoPices[index].progress = 0
					} else if (this.videoPices[index].startTime + this.videoPices[index].duration <= newNowTime) {
						this.videoPices[index].progress = 100
					} else {
						this.videoPices[index].progress = ((newNowTime - this.videoPices[index].startTime) / this
							.videoPices[index].duration) * 100
						this.videoPices[index].showComment = true
					}
				}
				this.$forceUpdate()
			},
			fullScreenChange() {

			},
			videoErrorCallback() {

			},
			playVideo() {
				this.videoContext.play()
			},
			onPause() {
				console.log('暂停视频')
			},
			onStartPlay() {
				console.log('播放视频')
			},
			handleReady(e) {
				console.log(`ready`, e);
			},
			handleTimeupdate(e) {
				// let time = this.$refs.VueAliplayerV2.getCurrentTime();
			},


			handleSelectedOption(answer) {
				this.selectedOption = answer
			},
			isWrong(answer, rightAnswer) {
				return parseInt(answer) !== parseInt(rightAnswer)
			},







			changeCommentInputStatus() {
				if (!this.commentInputStatus) {

					if (this.sectionContentInfo.type == 1) {
						this.comment.time = this.currentVideoTime
						this.comment.sectionContentId = this.sectionContentInfo.id
						this.videoContext.pause()
					} else {
						this.comment.time = this.currentProgress
						this.comment.sectionContentId = this.sectionContentInfo.id
					}


				}

				this.commentInputStatus = !this.commentInputStatus
			},
			addComment() {
				console.log("评论内容", this.comment)
				this.$api.addSectionContentComment(this.comment).then(res => {
					uni.showToast({
						title: '感谢~'
					})
				})

				if (this.sectionContentInfo.type == 1) {
					this.videoContext.play()
				}
				this.commentInputStatus = !this.commentInputStatus
				this.comment = {
					content: "",
					time: 0,
					pictures: [],
					visibility: 0,
					isQuestion: false
				}
			},


			toHandleComment(id) {
				this.handleCommentId = id
				this.$refs.reportOptions.open('bottom')
			},
			reportComment(reportReason) {
				this.$api.report({
					reportReason: reportReason,
					type: 6,
					linkId: this.handleCommentId,
					sourceId: this.sectionContentInfo.courseId
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '已举报'
					})
					this.closeModal()
				})
			},
			closeModal() {
				this.handleCommentId = ""
				this.$refs.reportOptions.close('bottom')
			},








			cancelAddComment() {
				this.commentInputStatus = !this.commentInputStatus
			},
			ChooseImage() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						UploadOss.uploadFile(res).then(res => {
							this.comment.pictures.push(res)
						})
					}
				});
			},
			ViewImage(picture, commentIndex, pieceIndex) {
				if (this.sectionContentInfo.type == 1) {
					uni.previewImage({
						urls: this.videoPices[pieceIndex].comments[commentIndex].pictures,
						current: picture
					});
				} else {
					uni.previewImage({
						urls: this.comments[commentIndex].pictures,
						current: picture
					});
				}

			},
			DelImg(e) {
				uni.showModal({
					content: '确定要删除这张照片吗？',
					cancelText: '再看看',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.comment.pictures.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			changeVisialbe() {
				this.comment.visibility = this.comment.visibility == 0 ? 2 : 0
			},
			changeHistoryShow() {
				this.showHistorySection = !this.showHistorySection
			},
			changeType() {
				this.comment.isQuestion = !this.comment.isQuestion
			},


			toBackPage() {
				uni.navigateBack()
			},
		},
		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		}



	}
</script>

<style scoped lang="scss">
	.section-comment {
		background-color: #FFFFFF;

		.top {
			position: sticky;
			top: 0;
			background-color: white;
			border-bottom: solid thin #d1d1d1;


			width: 100%;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-top: 100rpx;


			// #ifdef H5
			padding-top: 40rpx;
			// #endif
		}

		.text-content {
			width: 670rpx;
			margin: 40rpx;

			line-height: 50rpx;
			letter-spacing: 4rpx;

			/deep/ p {
				margin: 20rpx 0;
			}

		}

		.problem-content {
			width: 670rpx;
			margin: 40rpx;


			.popup-content {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;

				.title {
					font-size: 32rpx;
				}

				.option {
					margin: 20rpx 0;
				}

				.option-char {
					width: 60rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 50%;
					background-color: #E4E4E4;
				}

				.selected-option-char {
					background-color: #619DFF;
					color: #ffffff;
				}

				.selected-wrong-option {
					background-color: #ff5457;
					color: #ffffff;
				}


				.option-name {
					margin-left: 20rpx;
				}

				.popup-button {
					width: 160rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 50rpx;
					color: #ffffff;
				}

				.cancel {
					background-color: #ADAAAA;
				}

				.submit {
					background-color: #619DFF;
					margin-left: 110rpx;
				}


				.submit-button {
					width: 160rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					background-color: #619DFF;
					color: #ffffff;
					border-radius: 50rpx;
				}

				.answer {
					width: 540rpx;
					background-color: #F6F6F6;
					border-radius: 20rpx;
					padding: 20rpx;
					margin-bottom: 30rpx;
				}


			}
		}

		.video-content {
			width: 750rpx;
			height: 422rpx;
			overflow-y: scroll;
			display: flex;
			flex-direction: column;
			align-items: center;

			position: fixed;
			top: 180rpx;

			// #ifdef H5
			top: 120rpx;
			// #endif

			z-index: 4;

			background-color: #dcd8d8;
		}

		.main-info {

			.video-pice {
				display: flex;
				flex-direction: column;

				.pice-top {

					width: 750rpx;
					position: relative;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border: solid thin #E5E5E5;
					margin-bottom: 20rpx;
					height: 70rpx;

					.progress {
						width: 750rpx;
						height: 70rpx;
						margin-top: 10rpx;
						margin-bottom: 10rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						position: relative;


						.progress-inner {
							height: 70rpx;
							background-color: #e7e7e7;
							display: flex;
							flex-direction: row;
							align-items: center;
						}
					}
				}
			}

			.split-line {
				width: 100%;
				height: 10rpx;
				background-color: #f9f9f9;
			}

			.comments-top {
				width: 670rpx;
				margin-left: 40rpx;
				margin-top: 30rpx;
				padding-bottom: 30rpx;
			}

			.comments {
				padding-bottom: 100rpx;
				background-color: #FFFFFF;

				.comment {

					width: 670rpx;
					margin: 30rpx 40rpx;

					.comment-top {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.avatar {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							overflow: hidden;
						}


						.nickname {
							font-weight: bold;
							margin-left: 20rpx;
						}
					}

					.comment-bottom {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.date {
							font-size: 28rpx;
							color: gray;
						}

						.buttons {
							display: flex;
							flex-direction: row;
							justify-content: flex-end;

							.footer-item {
								margin-left: 20rpx;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;

								.text {
									font-size: 28rpx;
									margin-left: 10rpx;
									color: #9d9d9d;
								}

								.footer-button {
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
								}
							}
						}
					}

					.pictures {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin: 10rpx 0;

						width: 100%;
						flex-wrap: wrap;

						.picture {
							width: 220rpx;
							height: 220rpx;
							border-radius: 10rpx;
							overflow: hidden;
						}
					}

				}

			}




			.comment-add {
				width: 670rpx;
				margin-left: 40rpx;
				margin-top: 30rpx;

				padding-bottom: 200rpx;

				.textarea-box {
					padding: 20rpx;
					// border: 2rpx solid #9A9A9A;
					background-color: #F2F2F2;
					border-radius: 20rpx;
					margin-bottom: 30rpx;
				}


				.pictures {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					width: 670rpx;

					.picture {
						height: 210rpx;
						width: 210rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}

					.picture-add {
						height: 210rpx;
						width: 200rpx;
						background-color: #F2F2F2;
						border-radius: 10rpx;

						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}

				}

				.tag-area {
					display: flex;
					flex-direction: row;
					margin-top: 20rpx;

					.tag {
						height: 40rpx;
						width: 40rpx;
						border: solid thin gray;
						border-radius: 10rpx;

						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
					}

				}
			}
		}

		.option-modal-box {
			width: 690rpx;
			margin-left: 30rpx;
			margin-bottom: 30rpx;

			.option-buttons {
				width: 690rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;

				.option-button {
					width: 650rpx;
					line-height: 60rpx;
					text-align: center;
					padding: 20rpx;
					border-bottom: solid thin #f4f4f4;
				}
			}

			.cancel-button {
				width: 690rpx;
				height: 100rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				text-align: center;
				line-height: 100rpx;
				color: #c3c3c3;
			}
		}

		.page-btns {
			display: flex;
			position: fixed;
			right: 60rpx;
			bottom: 160rpx;
			z-index: 10;


			.button {
				width: 90rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: rgba(240, 240, 240, 1.0);
				border-radius: 50rpx;
				color: white;
			}
		}

	}





	image {
		width: 100%;
		height: 100%;
	}
</style>